<template>
    <div id="app">
      <h1>What needs to be done?</h1>
      <input type="text" v-model="newTodo" @keyup.enter="addTodo">
      <ul>
        <li v-for="(todo, index) in todos" :key="index">
          <input type="checkbox" v-model="todo.done">
          {{ todo.text }}
          <button @click="removeTodo(index)">X</button>
        </li>
      </ul>
      <p>{{ remaining }} items left</p>
      <button @click="showAll">All</button>
      <button @click="showActive">Active</button>
      <button @click="showCompleted">Completed</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        newTodo: '',
        todos: [],
        remaining: 0,
      };
    },
    methods: {
      addTodo() {
        if (this.newTodo.trim()) {
          this.todos.push({ text: this.newTodo, done: false });
          this.newTodo = '';
          this.updateRemaining();
        }
      },
      removeTodo(index) {
        this.todos.splice(index, 1);
        this.updateRemaining();
      },
      updateRemaining() {
        this.remaining = this.todos.filter((todo) => !todo.done).length;
      },
      showAll() {
        this.todos.forEach((todo) => (todo.show = true));
      },
      showActive() {
        this.todos.forEach((todo) => (todo.show = !todo.done));
      },
      showCompleted() {
        this.todos.forEach((todo) => (todo.show = todo.done));
      },
    },
  };
  </script>
  
  <style scoped>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    text-align: center;
    color: #2c3e50;
  }
  
  li input[type=checkbox] {
    margin-right: 8px;
  }
  </style>